<template>
	<view class="container">
		<view class="left">
			<view v-for="(item,index) in leftTypeList" :key="index" :class="leftActiveIndex==index?'leftActiveClass':''" class="left_type"
			 @click="selectLeft(index)">
				<view class="yellow_line" v-if="leftActiveIndex==index"></view>
				<view class="type_name">
					{{item}}
				</view>
			</view>
		</view>
		<view class="right">
			<view class="position">
				<view class="position_title">
					当前定位
				</view>
				<view class="type">
					美术/设计
				</view>
			</view>
			<view class="">
				<view class="position_title">
					选择分类
				</view>
				<view class="select_catory">
					<view :class="rightActiveClass==i?'rightActiveClass':''" v-for="(option, i) in rihtTypeList" :key="i" class="type marginDistance" @click="selectRight(i)">
						{{option}}
					</view>
				</view>
			</view>


		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				leftTypeList: ["推荐", "文字策划", "美术设计", "家电维修", "房产中介", "文字策划", "美术设计", "家电维修", "房产中介", "美术设计", "家电维修", "房产中介", "文字策划", "美术设计", "家电维修", "房产中介"],
				rihtTypeList: ["美工设计", "创意策划", "平面设计", "CAD设计", "创意策划", "平面设计", "CAD设计"],
				leftActiveIndex: 2,
				rightActiveClass:0
			}
		},
		methods: {
			selectLeft(index) {
				this.leftActiveIndex = index;
			},
			selectRight(index){
				this.rightActiveClass=index;
			}

		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		display: flex;
	}

	.left {
		width: 166rpx;
		font-size: 28rpx;
		color: #333333;
		margin-right: 38rpx;
		background-color: #F7F6F6;
	}

	.left .left_type {
		height: 88rpx;
		display: flex;
		background-color: #F7F6F6;
		align-items: center;
	}

	.left .yellow_line {
		width: 9rpx;
		height: 38rpx;
		background-color: #fd9103;

	}

	.left .type_name {
		margin-left: 20rpx;
	}

	.left .leftActiveClass {
		background-color: #fff;
	}

	.left .leftActiveClass .type_name {
		margin-left: 11rpx;
	}
	.right{
		flex:1;
		margin-top: 27rpx;
	}
	.position{
		margin-bottom: 40rpx;
	}
	.position_title{
		font-size: 32rpx;
		color:#333333;
		margin-bottom: 26rpx;
	}
	.type{
		font-size: 28rpx;
		color:#333333;
		width:160rpx;
		height: 74rpx;
		line-height: 74rpx;
		text-align: center;
		border:3rpx solid #FCA601;
		border-radius: 7rpx;
	}
	.select_catory{
		display: flex;
		flex-wrap: wrap;
	}
	.marginDistance{
		margin-right: 14rpx;
		margin-bottom: 30rpx;
	}
	.rightActiveClass{
		background-color: #FCA601;
		border:none;
	}
</style>
